<template>
  <div class="container">

      <el-row>
  <el-col :span="6" v-for="o in categorys" :key="o.id" >
    <el-card :body-style="{ padding: '50px' }">
      <span v-html="o.productImg" class="image"></span>
      <div style="padding: 14px;">
        <span>{{o.brandName}}</span>
        <div class="bottom clearfix">
          <div class="time">{{ o.productPrice }}</div>
          <el-button type="danger" class="button" @click="buy(o.productId)">点击购买</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
  </div>
</template>
<script>
  import { getCategory } from "@/api"
  export default {
    data() {
      return {
        loading: '',
        categorys: []
      }
    },
    created() {
      //获取所有的列表
      getCategory()
        .then(res => {
          this.categorys = res.data.result
          //关闭加载动画
          // this.loading.close()
        })
        .catch(err => {
          console.log(err)
        })
    },
    // mounted() {
    //   // 启用加载动画
    //   this.loading = this.$loading({
    //     lock: true,
    //     text: '正在加载',
    //     spinner: 'el-icon-loading',
    //     background: 'rgba(0, 0, 0, 0.7)'
    //   });
    // },
    methods: {
      buy(id) {
        //跳转到详情页
        this.$router.push({ path: "/detail", query: { id } })
      }
    }
  }
</script>
<style>
    .el-card{
        margin: 10px;
    }
    .price{
        font-size: 20px;
        color: red;
    }
    .bottom{
        margin-top: 50px;
        line-height: 12px;
    }
    .button{
        float: right;
        width: 100px;
    }
    .time{
        font: 21px/40px "";
    }
    .image{
        width: 100%;
        display: block;
        text-align: center;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: "";
    }
    .clearfix:after{
        clear:both;
    }

</style>

